<template>
  <div>
    <div class="box">
      <div ref="vantaRef" style="width: 100%;height: 100vh ">

        <el-row>
          <div class="head_img">
            <img src="../assets/head_img.png">
          </div>
          <div class="login-wrap">
            <el-form class="login-container" :model="form">
              <h1 class="title">管理员登录</h1>
              <el-form-item>
                <el-input type="text" v-model="form.username" placeholder="账号" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input type="password" v-model="form.password" placeholder="密码" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit" style="width: 100%;">登陆</el-button>
              </el-form-item>
              <el-row style="text-align: center;margin-top: -10px;">
                <!--              <el-link type="primary" @click="doRegister">注册账号</el-link>-->
                <!--              <el-link type="primary" @click="">忘记密码</el-link>-->
              </el-row>
            </el-form>
          </div>
        </el-row>
      </div>
    </div>

    <!--    <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="name">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="pwd">
            <el-input v-model="form.password"></el-input>
          </el-form-item>

          <el-button type="primary" @click="onSubmit">登录</el-button>

        </el-form>-->


  </div>
</template>

<script>
import BIRDS from "vanta/src/vanta.birds.js";
import * as THREE from "three";

export default {
  name: "Login",
  data() {
    return {
      head_img: 'src/assets/168258904371123.png',
      form: {}
    }
  },

  methods: {
    onSubmit() {
      this.axios({
        method: "post",
        url: "http://localhost:8080/login",
        data: this.form,
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        }
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // 成功通知
            this.$message('登陆成功');
            console.log(resp.data.data.user)
            this.$store.commit('SET_USERINFO', resp.data.data.user)

            this.$store.commit('SET_TOKEN', resp.data.data.token)


            console.log(this.$store.state.token)


            this.$router.replace('/');
          }
        }
      })
    },

    doRegister() {

    }
  },
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.BIRDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      // backgroundColor: 0xc1c4c4,
      color1: 0xdedede,
      color2: 0x53575b,
      birdSize: 2.50,
      wingSpan: 26.00,
      speedLimit: 2.00,
      quantity: 2.00,
    });


  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
}
</script>

<style scoped>

.box {
  position: relative;

}

.login-wrap {
  z-index: 999;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 15%;
  /*background-image: url();*/
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.head_img {
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
}
</style>
